<template>
  <div>
    <el-row>
      <el-col>
        <div id="sanchi" :style="{width: '100%', height: '1000px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('sanchi'));
        // 绘制图表
        var fx = ['华北区',
          '华东区',
          '东北区',
          '华南区',
          '西南区',
          '西北区',
          '华中区'
        ]

        var fxdata = []
        for (var i = 0; i < fx.length; i++) {
          fxdata.push({
            name: fx[i],
            max: 20
          })
        }

        var data = {'同济大学': [[26, 17, 7, 0, 17, 7, 2],
            [10, 8, 1, 2, 12, 7, 0],
            [[252.0,
              245.0,
              251.0,
              262.0,
              249.0,
              253.0,
              255.0,
              228.0,
              229.0,
              246.0,
              253.0,
              225.0,
              237.0,
              243.0,
              234.0,
              231.0,
              235.0,
              223.0,
              230.0,
              233.0,
              228.0,
              243.0,
              229.0,
              237.0,
              223.0,
              226.0],
              [249.8,
                257.5,
                252.5,
                256.5,
                243.3,
                241.8,
                251.8,
                249.8,
                248.0,
                253.2,
                249.3,
                255.0,
                247.2,
                251.3,
                249.5,
                240.2,
                248.2],
              [304.0, 286.0, 291.0, 295.0, 281.0, 271.0, 277.0],
              [],
              [293.5,
                256.8,
                267.5,
                294.5,
                277.6,
                273.5,
                296.0,
                264.7,
                276.6,
                267.5,
                264.2,
                262.2,
                268.9,
                266.7,
                290.0,
                298.0,
                256.0],
              [265.0, 292.0, 271.0, 265.0, 284.0, 261.0, 274.0],
              [263.3, 285.5]]],
          '中南大学': [[3, 4, 3, 0, 1, 1, 0],
            [1, 6, 2, 0, 7, 3, 0],
            [[233.0, 236.0, 225.0],
              [244.7, 240.8, 245.5, 255.0],
              [279.0, 287.0, 274.0],
              [],
              [260.0],
              [265.0],
              []]],
          '郑州大学': [[3, 1, 1, 0, 0, 0, 0],
            [1, 0, 0, 0, 0, 0, 0],
            [[231.0, 240.0, 242.0], [242.5], [285.0], [], [], [], []]],
          '哈尔滨工业大学': [[2, 0, 0, 0, 0, 0, 0],
            [2, 0, 0, 0, 0, 0, 0],
            [[253.0, 233.0], [], [], [], [], [], []]],
          '东南大学': [[0, 1, 0, 0, 2, 2, 0],
            [1, 0, 2, 0, 2, 0, 0],
            [[], [243.7], [], [], [283.2, 265.7], [272.0, 264.0], []]],
          '西南交通大学': [[2, 2, 2, 3, 6, 4, 1],
            [0, 3, 3, 2, 6, 2, 2],
            [[225.0, 238.0],
              [240.2, 242.7],
              [276.0, 269.0],
              [244.0, 231.0, 253.0],
              [303.0, 279.6, 258.0, 263.9, 271.2, 255.5],
              [261.0, 279.0, 265.0, 269.0],
              [263.1]]],
          '湖南大学': [[2, 0, 0, 0, 0, 0, 0],
            [1, 0, 1, 0, 0, 0, 0],
            [[226.0, 223.0], [], [], [], [], [], []]],
          '吉林大学': [[2, 0, 3, 0, 1, 0, 0],
            [4, 0, 1, 0, 2, 1, 1],
            [[236.0, 231.0], [], [278.0, 293.0, 268.0], [], [276.7], [], []]],
          '长安大学': [[6, 0, 0, 0, 2, 0, 0],
            [5, 1, 0, 0, 3, 0, 0],
            [[227.0, 245.0, 251.0, 230.0, 237.0, 247.0],
              [],
              [],
              [],
              [255.0, 256.0],
              [],
              []]],
          '西北工业大学': [[1, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[250.0], [], [], [], [], [], []]],
          '沈阳建筑大学': [[1, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[227.0], [], [], [], [], [], []]],
          '华中科技大学': [[1, 0, 0, 0, 1, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[223.0], [], [], [], [300.0], [], []]],
          '重庆交通大学': [[0, 0, 0, 0, 0, 0, 0],
            [1, 0, 0, 0, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '山东大学': [[0, 1, 1, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0],
            [[], [244.7], [276.0], [], [], [], [262.5]]],
          '宁波大学': [[0, 0, 0, 0, 0, 0, 0],
            [1, 0, 0, 0, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '大连理工大学': [[1, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[244.0], [], [], [], [], [], []]],
          '东北林业大学': [[0, 0, 0, 0, 1, 0, 0],
            [1, 0, 0, 0, 0, 0, 0],
            [[], [], [], [], [258.0], [], []]],
          '石河子大学': [[0, 0, 0, 0, 0, 0, 0],
            [1, 0, 0, 0, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '中国矿业大学': [[1, 2, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[225.0], [252.8, 247.0], [], [], [], [], []]],
          '中国民航大学': [[0, 0, 0, 0, 0, 0, 0],
            [1, 0, 0, 0, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '内蒙古大学': [[1, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[227.0], [], [], [], [], [], []]],
          '中国地质大学（北京）': [[0, 0, 0, 0, 0, 0, 0],
            [1, 0, 0, 0, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '重庆大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 1, 0, 0, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '武汉理工大学': [[0, 0, 0, 0, 0, 1, 0],
            [0, 1, 0, 0, 1, 0, 0],
            [[], [], [], [], [], [265.0], []]],
          '北京交通大学': [[0, 1, 0, 1, 1, 1, 0],
            [0, 0, 0, 0, 2, 1, 0],
            [[], [245.2], [], [234.0], [263.6], [261.0], []]],
          '华南理工大学': [[0, 0, 2, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[], [], [273.0, 270.0], [], [], [], []]],
          '哈尔滨工业大学（威海）': [[0, 0, 1, 0, 2, 0, 0],
            [0, 0, 0, 1, 2, 0, 0],
            [[], [], [270.0], [], [263.4, 261.0], [], []]],
          '中山大学': [[0, 0, 1, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[], [], [287.0], [], [], [], []]],
          '中国农业大学': [[0, 0, 1, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[], [], [268.0], [], [], [], []]],
          '南京理工大学': [[0, 0, 1, 2, 0, 0, 0],
            [0, 0, 0, 1, 0, 0, 0],
            [[], [], [268.0], [244.0, 246.0], [], [], []]],
          '苏州大学': [[0, 0, 0, 1, 1, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[], [], [], [243.0], [259.6], [], []]],
          '厦门大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 1, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '扬州大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 1, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '上海海事大学': [[0, 0, 0, 1, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [[], [], [], [230.0], [], [], []]],
          '北京林业大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 1, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '北京工业大学': [[0, 0, 0, 0, 1, 0, 0],
            [0, 0, 0, 1, 0, 0, 0],
            [[], [], [], [], [292.0], [], []]],
          '南京工业大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 1, 0, 0, 0],
            [[], [], [], [], [], [], []]],
          '新疆大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 1, 0, 0],
            [[], [], [], [], [], [], []]],
          '大连海事大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 2, 0, 0],
            [[], [], [], [], [], [], []]],
          '兰州交通大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 1, 0, 0],
            [[], [], [], [], [], [], []]],
          '华东交通大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 1, 0],
            [[], [], [], [], [], [], []]],
          '四川大学': [[0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 1],
            [[], [], [], [], [], [], []]]}
        var nodedata = []
        var university = '同济大学'

        var alldata = []
        for (var key in data) {
          var tempdata = data[key][2]
          for (var i = 0; i < tempdata.length; i += 1){
            for (var j = 0; j < tempdata[i].length; j += 1){
              alldata.push([fx[i],tempdata[i][j]])
            }
          }
        }

        function getscoredata(university,tempdata) {
          var result = []
          for (var i = 0; i < tempdata.length; i += 1){
            for (var j = 0; j < tempdata[i].length; j += 1){
              result.push([fx[i],tempdata[i][j]])
            }
          }
          return result
        }

        for (var key in data) {
          var totalnum = data[key][0].reduce(function(a, b) { return a + b; }, 0)+data[key][1].reduce(function(a, b) { return a + b; }, 0)
          if (key == university) {
            nodedata.push({
                name: key,
                symbolSize: Math.max(totalnum, 7),
                value: data[key][2],
                label:{color:'rgba(193,56,52,1)'},
                itemStyle: {
                  normal: {
                    color: 'rgba(193,56,52,1)'
                  }
                }

              }

            )
          } else {
            nodedata.push({
                name: key,
                symbolSize: Math.max(totalnum, 3),
                value: data[key][2],
                label:{color:'black'},
                itemStyle: {
                  normal: {
                    color: 'rgba(51,71,85,1)'
                  }
                }

              }

            )
          }
        }

        myChart.setOption(
          {
            title: {
              text: '抗感染基层聚类统计',
              subtext: '',
              x: 'center'
            },
            legend: {
              data: ['通过初选','没通过'],
              align: 'left',
              left: 10
            },
            toolbox: {
              feature: {
                magicType: {
                  type: ['stack', 'tiled']
                },
                dataView: {}
              }
            },
            tooltip: {},
            xAxis: [{
              data: fx,
              name: '方向',
              silent: false,
              axisLabel : {
                textStyle: {
                  color: '#fff'
                }
              },
              axisLine: {
                onZero: true,
                lineStyle: {
                  type: 'solid',
                  color: '#fff',//左边线的颜色
                  width:'1'//坐标线的宽度
                }
              },
              splitLine: {
                show: false
              },
              splitArea: {
                show: false
              }
            },{
              gridIndex:1,
              data: fx,
              name: '方向',
              silent: false,
              axisLabel : {
                textStyle: {
                  color: '#fff'
                }
              },
              axisLine: {
                onZero: true,
                lineStyle: {
                  type: 'solid',
                  color: '#fff',//左边线的颜色
                  width:'1'//坐标线的宽度
                }
              },
              splitLine: {
                show: false
              },
              splitArea: {
                show: false
              }
            }
            ],
            yAxis: [{
              max: 35,
              name:'人数',
              inverse: false,
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#fff',//左边线的颜色
                  width:'1'//坐标线的宽度
                }
              },
              axisLabel : {
                textStyle: {
                  color: '#fff'
                }
              },
              splitArea: {
                show: false
              }
            },{gridIndex:1,
              name:'复试总分',
              max: 300,
              min:210,
              inverse: false,
              axisLabel : {
                textStyle: {
                  color: '#fff'
                }
              },
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#fff',//左边线的颜色
                  width:'1'//坐标线的宽度
                }
              },
              splitArea: {
                show: false
              }
            }
            ],
            grid: [{
              left: 50,
              name: '人数',
              top:'10%',
              height: '40%',
              width: '40%',

            },{
              left: 50,
              name: '人数',
              top:'60%',
              height: '35%',
              width: '40%',

            }
            ],
            series: [{
              name: '通过初选',
              type: 'bar',
              stack: 'one',
              xAxisIndex: 0,
              yAxisIndex: 0,
              data: data[university][0],            label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
            }, {
              name: '没通过',
              type: 'bar',
              stack: 'one',
              xAxisIndex: 0,
              yAxisIndex: 0,
              data: data[university][1],            label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
            },

              {

                type: 'graph',
                layout: 'force',
                left:'40%',
                right:'0%',
                top:'10%',
                bottom:'50%',

                focusNodeAdjacency: true,
                roam: true,
                data: nodedata,
                label: {
                  normal: {
                    position: 'top',
                    show: true,
                    textStyle: {
                      color: 'rgba(18,89,147,1)',
                      fontSize: 12
                    },
                  }
                },
                force: {
                  repulsion: 70
                },
                links: [],
                tooltip: {
                  formatter: function(d) {
                    var temp = data[d.data.name]
                    var totalnum = temp[0].reduce(function(a, b) { return a + b; }, 0)+temp[1].reduce(function(a, b) { return a + b; }, 0)

                    return d.name + '参加人数:' + totalnum
                  }
                }

              },

              {
                type: 'pie',
                radius: [0, '30%'],
                center: ['70%', '75%'],
                data: [{name:'通过初选',
                  value:data[university][0].reduce(function(a, b) { return a + b; }, 0)
                },{name:'没通过',
                  value:data[university][1].reduce(function(a, b) { return a + b; }, 0)
                }
                ],            label: {
                  normal: {
                    formatter: '{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#eee',
                    borderColor: '#aaa',
                    borderWidth: 1,
                    borderRadius: 4,
                    // shadowBlur:3,
                    // shadowOffsetX: 2,
                    // shadowOffsetY: 2,
                    // shadowColor: '#999',
                    // padding: [0, 7],
                    rich: {
                      a: {
                        color: '#999',
                        lineHeight: 22,
                        align: 'center'
                      },
                      // abg: {
                      //     backgroundColor: '#333',
                      //     width: '100%',
                      //     align: 'right',
                      //     height: 22,
                      //     borderRadius: [4, 4, 0, 0]
                      // },
                      hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                      },
                      b: {
                        fontSize: 16,
                        lineHeight: 33
                      },
                      per: {
                        color: '#eee',
                        backgroundColor: '#334455',
                        padding: [2, 4],
                        borderRadius: 2
                      }
                    }
                  }}
              },
              {
                name: '初选全部',
                type: 'scatter',

                symbolSize:8,
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: alldata,
                label: {
                  normal: {
                    show: false,
                    position: 'inside'
                  }
                },
              },
              {
                name: '通过初选',
                type: 'scatter',
                symbol:'arrow',
                symbolSize:7,
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: getscoredata(university,data[university][2]),
                label: {
                  normal: {
                    show: false,
                    position: 'inside'
                  }
                },
              }

            ]
          }
        )

        myChart.on('click', function(p) {
          console.log(p)
          if (p.seriesType == 'graph') {
            var university = p.name
            var nodedata = []
            var piedata = []
            var scatterdata = []
            for (var key in data) {
              var totalnum = data[key][0].reduce(function(a, b) { return a + b; }, 0)+data[key][1].reduce(function(a, b) { return a + b; }, 0)

              if (key == university) {
                nodedata.push({
                    name: key,
                    symbolSize: Math.max(totalnum, 7),
                    value: data[key][2],
                    label:{color:'rgba(193,56,52,1)'},
                    itemStyle: {
                      normal: {
                        color: 'rgba(193,56,52,1)'
                      }
                    }
                  }
                )
                piedata=[{name:'通过',
                  value:data[university][0].reduce(function(a, b) { return a + b; }, 0)
                },{name:'没通过',
                  value:data[university][1].reduce(function(a, b) { return a + b; }, 0)
                }]
                scatterdata = getscoredata(university,data[university][2])
              } else {
                nodedata.push({
                    name: key,
                    symbolSize: Math.max(totalnum, 3),
                    value: data[key][2],
                    label:{color:'black'},
                    itemStyle: {
                      normal: {
                        color: 'rgba(51,71,85,1)'
                      }
                    }

                  }

                )
              }
            }
            myChart.setOption({
              title: {
                subtext: university
              },
              series: [{
                data: data[university][0]
              }, {
                data: data[university][1]
              }, {
                data: nodedata
              },{data:piedata},{},{data:scatterdata}]
            })
          }
        })

      }
    }
  }
</script>

<style scoped>

</style>
